@top-height:38px;
@width:1200px;
@font-size:17px;
@red:#F01A1A;
.cateB{
    width: 1180px;
    height: 32px;
    padding: 0 10px;
    background: #F6F6F6;
    margin: 0 auto;
    line-height: 32px;
    li{
        font-size: 12px;
        a{
            color: black;
            &:hover{
                color: @red;
            }
        }
    }
    span{
        float: left;
    }
}
//索引
.logo{
    width: @width;
    height:70px;
    margin: 0 auto;
    position: relative;
    .logo-left{
        width: 30%;
        height: 70px;
        background: white;
        float: left;
        div{
            width: 189px;
            height: 37px;
            background: url(../images/lenovo.png) -4px -363px no-repeat;
            margin-top:33px ;
        }
    }
    .logo-right{
        width: 70%;
        height: 70px;
        background: white;
        float: right;
        div{
            input{
                border: 1px black solid;
                width: 620px;
                height: 35px;
                float: right;
                margin-top:33px ;
                padding: 0 8px;
            }
            .indexed{
                width: 61px;
                height: 37px;
                background: url(../images/indexed.jpg);
                float: right;
                margin-top:33px ;
            }
        }
    }
}
//商品选取
.goods-box{
    width: @width;
    height: 728px;
    margin: 0 auto;
    position: relative;
    .box-left{
        width: 610px;
        height: 700px;
        float: left;
        padding-top: 20px;
        overflow: hidden;
        position: absolute;
        left: 0;
        .imgs{
            display: block;
            text-align: center;
            position: absolute;
            display: none;
            left: 20px;
            img{
                width: 540px;
                height: 540px;
                
            }
        }
        .imgs:first-child{
            display: block;
        }
        ul{
            width: 544px;
            height: 120px;
            margin: 20px auto;
            position: absolute;
            left: 20px;
            bottom: 0px;
            li{
                width: 450px;
                padding: 0 45px;
                .btn{
                    display: block;
                    width: 20px;
                    height: 30px;
                    float: left;
                    margin-top:25px ;
                    
                    background: url(../images/xtu.png) no-repeat -10px -8px;
                }
                .button{
                    display: block;
                    width: 20px;
                    height: 30px;
                    float: left;
                    margin-top:25px ;
                    margin-left: 5px;
                    background: url(../images/xtu.png) no-repeat -40px -8px;
                    
                }
                .image{
                    display: block;
                    width: 82px;
                    height: 83px;
                    border: 1px solid #CECDCD;
                    float: left;
                    margin-left: 5px;
                    img{
                        width: 82px;
                        height: 83px;
                        float: left;
                    }
                }
                .borderColor{
                    border: 2px solid @red;
                    display: block;
                    width: 82px;
                    height: 83px;
                    float: left;
                    margin-left: 5px;
                    img{
                        width: 82px;
                        height: 83px;
                        float: left;
                        
                    }
                }
            }
            span{
                color: #9A9A9A;
                font-size: 12px;
                float: left;
                margin-top: 20px;
            }
            .fenxiang{
                display: block;
                width: 55px;
                height: 16px;
                float: left;
                margin-left: 250px;
                margin-top: 20px;
                color: #676262;
                background: url(../images/xtu.png) no-repeat -5px -55px;
                &:hover{
                    color: @red;
                }
            }
            .shouc{
                display: block;
                width: 55px;
                height: 16px;
                float: left;
                color: #676262;
                margin-top: 20px;
                background: url(../images/xtu.png) no-repeat -5px -108px;
                &:hover{
                    color: @red;
                }
            }
        }
        
    }
    .box-right{
        width: 590px;
        float: right;
        padding-top: 20px;
        position: relative;
        h1{
            width: 590px;
            height: 42px;
            font-size: 20px;
            line-height: 42px;
            font-weight: 100;
        }
        h6{
            width: 590px;
            height: 40px;
            font-weight: 100;
            color: #6F6F6F;
            font-size: 13px;
        }
        .pir{
            width: 590px;
            height: 100px;
            background: #EEEEEE;
            padding: 10px 0;
            div{
                width: 570px;
                height: 50px;
                padding: 0 10px;
                span{
                    font-size: 13px;
                }
                b{
                    font-size: 26px;
                    color: @red;
                }
            }
        }
        .xuanze{
            width: 570px;
            padding: 20px 10px;
            border-bottom: 1px solid #ECECEC;
            float: left;
            span{
                font-size: 13px;
                font-weight: bold;
                float: left;
                position: relative;
                left: -50px;
            }
            ul{
                margin-left: 40px;
                float: left;
                 li{
                    clear: both;
                    position: relative;
                    a{
                        display: block;
                        width: 244px;
                        height: 30px;
                        border: 1px solid #ECECEC;
                        margin-bottom: 5px;
                        text-align: center;
                        padding: 0 10px;
                        line-height: 30px;
                        color: #676262;
                        &:hover{
                            border: 1px solid @red;
                        }
                    }
                    i{
                        display: block;
                        position: absolute;
                        top: 8px;
                        left: 20px;
                        width: 16px;
                        height: 17px;
                        background: url(../images/xtu.png) no-repeat -148px -10px;
                    }
                    p{
                        display: block;
                        position: absolute;
                        top: 12px;
                        right: 15px;
                        width: 15px;
                        height: 17px;
                    }
                }
            } 
        }
        .fuk{
            width: 550px;
            height: 120px;
            float: left;
            padding: 10px 20px;
            span{
                font-size: 13px;
                font-weight: bold;
                float: left;
            }
            h5{
                font-weight: 100;
                margin-left: 100px;
            }
            .button{
                width: 22px;
                height: 20px;
                border-left: none;
                background: #E7E7E7;
                line-height: 10px;
                display: block;
            }
            input{
                 color: #6F6F6F;
                 font-size: 20px;
                 border: 1px solid #6F6F6F;
            }
            .btn{
                width: 136px;
                height: 42px;
                display: block;
                border: 1px solid #e2231a;
                float: left;
                margin-top: -40px;
                margin-left: 20px;
                text-align: center;
                line-height: 42px;
                font-size: 20px;
            }
            .shop-box{
                width: 400px;
                height: 180px;
                border: 1px solid #ECECEC;
                background: white;
                position: fixed;
                left: 40%;
                top: 30%;
                border-radius: 10px;
                display: none;
                .prompt{
                    width: 360px;
                    height: 20px;
                    padding: 0 20px;
                    background: @red;
                    border-radius: 10px 10px 0 0; 
                    span{
                        font-size: 15px;
                        color: white;
                    }
                    a{
                        font-size: 16px;
                        color: white;
                        float: right;
                    }
                }
                .pro-box{
                    width: 360px;
                    height: 110px;
                    padding: 20px 20px;
                    i{
                        display: block;
                        width: 40px;
                        height: 40px;
                        float: left;
                        background: url(../images/shouyin.png) no-repeat -260px -10px;
                    }
                    span{
                        display: block;
                        width: 260px;
                        height: 40px;
                        line-height: 40px;
                        padding: 0 30px;
                    }
                    a{
                        padding: 5px 10px;
                        background: @red;
                        color: white;
                        position: relative;
                        margin-left: 70px;
                        top: 30px;
                        border-radius: 5px;
                    }
                }
            }
        }
    }
}
.con-box{
    width: @width;
    overflow: hidden;
    margin: 0 auto;
    .con-left{
        width: 210px;
        overflow: hidden;
        float: left;
        h1{
            width: 208px;
            height: 40px;
            background: #EEEEEE;
            text-align: center;
            line-height: 40px;
            font-size: 16px;
            margin-top: 20px;
        }
        ul{
            width: 186px;
            overflow: hidden;
            border: 1px solid #ECECEC;
            border-top: none;
            padding: 0 10px;
            li{
                width: 182px;
                height: 85px;
                border-top: 1px dotted black;
                .img{
                    display: block;
                    width: 75px;
                    height: 86px;
                    text-align: center;
                    float: left;
                    img{
                        line-height: 86px;
                        margin-top: 8px;
                    }
                }
                .words{
                    display: block;
                    width: 107px;
                    height: 32px;
                    float: left;
                    color: black;
                    margin-top: 10px;
                }
                p{
                    font-size: 12px;
                    float: left;
                }
                span{
                    font-size: 14px;
                    font-weight: bold;
                    color: @red;
                }
            }
        }
    }
    .con-right{
        width: 978px;
        float: right;
        border-left: 1px solid #ECECEC;
        margin-top: 20px;
        .con1{
            display: block;
        }
        .con2{
            display: none;
        }
        .tap{
            width: 978px;
            height: 41px;
            background: #EEEEEE;
            #con1{
                background:white;
                border-top:2px solid #E2231A;
            }
            a{
                display: block;
                width: 154px;
                height: 41px;
                float: left;
                font-size: 16px;
                line-height: 41px;
                text-align: center;
                color: black;
            }
        }
        .peizhi{
            width: 938px;
            padding: 20px;
            h1{
                width: 926px;
                height: 30px;
                font-size: 15px;
                border-bottom: 1px solid #EEEEEE;
                font-weight: 100;
            }
            h2{
                width: 866px;
                height: 23px;
                padding: 0 20px;
                background: #EEEEEE;
                font-size: 15px;
                line-height: 23px;
                float: left;
            }
            h3{
                width: 55px;
                height: 23px;
                padding: 0 20px;
                background: #EEEEEE;
                font-size: 12px;
                font-weight: 100;
                line-height: 23px;
                float: left;
            }
            h4{
                width: 771px;
                height: 23px;
                padding: 0 20px;
                font-size: 12px;
                font-weight: 100;
                line-height: 23px;
                float: left;
            }
        }
    }
}












































































